<template>
  <div class="container">
    <van-pull-refresh
      v-model="isLoading"
      pulling-text="下拉可刷新"
      loosing-text="松开以刷新"
      loading-text="正在刷新..."
      @refresh="onRefresh"
    >
      <transition name="el-zoom-in-top">
        <p class="tips" v-show="visible">为您搜寻到{{count}}篇可能感兴趣的内容</p>
      </transition>

      <van-list v-model="loading" :finished="finished" @load="onLoad">
        <van-cell
          clickable
          class="van-cell-media"
          v-for="item in list"
          :key="item.id"
          @click="onClick(item.id)"
        >
          <template slot="icon">
            <van-image
              :src="item.user.avatar"
              class="van-cell-media-avatar"
              width="30"
              height="30"
              round
            />
          </template>
          <template slot="title">
            <span>购物返佣</span>
            <div class="van-cell__label">{{item.experience}}</div>
            <div class="van-cell__label">{{item.depend_date}}</div>
          </template>
          <div class="price-cny">{{item.price}}</div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import {
  Tag,
  Col,
  Icon,
  Cell,
  CellGroup,
  Popup,
  Button,
  Panel,
  PullRefresh,
  Image,
  Lazyload,
  List
} from 'vant'

export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Panel.name]: Panel,
    [Popup.name]: Popup,
    [Image.name]: Image,
    [Button.name]: Button,
    [PullRefresh.name]: PullRefresh,
    [Lazyload.name]: Lazyload,
    [List.name]: List
  },

  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      count: 0,
      isLoading: false,
      show: false,
      visible: false,
      meta: {
        totalCount: 0,
        pageCount: 0,
        currentPage: 0,
        perPage: 0
      }
    }
  },

  methods: {
    onLoad () {
      let page = this.meta.currentPage + 1
      this.axios
        .get('/commission/order', {
          params: { page: page },
          headers: { FastMode: true }
        })
        .then(response => {
          let data = response.data
          let itemCount = data.items.length
          if (itemCount > 0) {
            this.list = this.list.concat(data.items)
          }
          this.meta = data.meta
          this.loading = false
          if (this.meta.pageCount <= this.meta.currentPage || itemCount <= 0) {
            this.finished = true
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    onClick (id) {
      // this.$router.push({name: 'discover/article/:id', params: {id: id}})
      // pushToArticlePage(id)
    },
    onRefresh () {
      let time = this.list.slice(0, 1)[0].created_at
      this.axios
        .get('/commission/order/recent', {
          params: { time: time },
          headers: { FastMode: true }
        })
        .then(response => {
          this.isLoading = false
          let data = response.data.items
          let count = data.length
          let listCount = this.list.length
          if (count > 0) {
            this.visible = true
            this.list = this.arrayUnique(data.concat(this.list))
            this.count = this.list.length - listCount
            setTimeout(() => {
              this.visible = false
            }, 1500)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    arrayUnique (arr) {
      let result = []
      let hash = {}
      for (let i = 0, elem; (elem = arr[i]) != null; i++) {
        if (!hash[elem.id]) {
          result.push(elem)
          hash[elem.id] = true
        }
      }
      return result
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.commission-header {
  background: #3a95fe;
}
.van-pull-refresh {
  min-height: 100vh;
}
.van-list {
  min-height: 100vh;
}
.van-cell__value {
  flex: none;
}
.price-cny {
  font-size: 20px;
}
</style>
